<template>
	<view>
		<view class="title">{{title}}</view>
		<view class="media">
			<!-- <view><image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/index/tech.png" class="top-image" mode=""></image></view>
			<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/index/tech.png" class="top-image" mode=""></image>
		 -->
		<u-parse :content="article" @preview="preview" @navigate="navigate" />
		</view>
		<view class="foot">阅读量：{{readCount}}次</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		data() {
			return {
				readCount:'',
				title:'',
				author:'',
				time:'',
				article:''
			}
		},
		components:{
			uParse
		},
		onLoad(options) {
			// console.log(options)
			this.getDetail(options.id)
		},
		methods: {
			getDetail(id){
				uni.showLoading({
					title:'加载中...'
				})
				this.$api.interfaceApi('getArticle')({
					id:id
				}).then(res=>{
					// console.log(res)
					if(res.code==200){
						this.title = res.data.title
						this.readCount = res.data.see_num
						this.author = res.data.author
						this.time =  res.data.time
						this.article = res.data.content
					}
					uni.hideLoading()
				})
			},
			
			preview(src, e) {
			  // do something
			},
			navigate(href, e) {
			  // do something
			}
			
		}
	}
</script>

<style>
.title{
	box-sizing: border-box;
	margin: 10rpx;
	padding: 10rpx;
	align-items: baseline;
	font-size: 32rpx;
	line-height: 80rpx;
	/* background-color: aqua; */
	border-bottom: 2rpx solid #bdbdbd;
}
	.media{
		/* display: block; */
		margin: 10rpx;
		padding: 10rpx;
		background-size: auto;
		align-items: center;
		justify-content: space-around;
	}
		.top-image{
			width: 100%;
			height: 350rpx;
			position: relative;
			background-size: auto;
		}
	.foot{
		margin:0 10rpx 15rpx 10rpx;
		padding:0 10rpx 15rpx 10rpx;
		color: #a8a8a8;
	}
</style>
